<template>
  <el-container style="min-height: 100vh">

    <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
      <el-menu router
               :default-active="$route.path"
               :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
               background-color="#4095E5"
               text-color="#fff"
               active-text-color="#ffd04b"
               :collapse-transition="false"
               :collapse="isCollapse"
      >
        <div style="height: 60px; line-height: 60px; text-align: center">
          <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; right: 5px">
          <b style="color: white" v-show="logoTextShow">教师管理系统</b>
        </div>
        <el-menu-item index="StudentView">
          <template slot="title">
            <i class="el-icon-message"></i>
            <span slot="title">学生管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">成绩管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/CheckpointView">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">关卡管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/CheckpointContentView">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">内容管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/MultiQuestionView">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">试题管理</span>
          </template>
        </el-menu-item>

        <el-menu-item index="1">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">通知管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="1">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">班级管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="TeacherView">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">个人信息管理</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
        <div style="flex: 1; font-size: 20px">
          <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
        </div>
        <el-dropdown style="width: 70px; cursor: pointer">
          <span>自安然</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">个人信息</el-dropdown-item>
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>

      <el-main>
        <div style="margin: 0px;width:100%;height:45px;text-align:center;background: #4095E5">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">个人管理</el-breadcrumb-item>
            <el-breadcrumb-item>个人管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
         <!--头像-->
        <el-row class="demo-avatar demo-basic" >
          <el-col :span="12">
            <div class="demo-basic--circle">
              <div class="block"><el-avatar :size="150" :src="circleUrl"></el-avatar></div>
              <p>头像</p>
            </div>
          </el-col>
        </el-row>
        <el-radio-group v-model="size">
          <el-radio label="">默认</el-radio>
          <el-radio label="medium">中等</el-radio>
          <el-radio label="small">小型</el-radio>
          <el-radio label="mini">超小</el-radio>
        </el-radio-group>
        <!--信息-->
        <el-descriptions class="margin-top" title="带边框列表" :column="1" :size="size" border direction="vertical">
          <template slot="extra">
            <el-button type="primary" size="small" @click="handleAdd">修改</el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            自安然
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            18100000000
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              管理班级
            </template>
            信管201
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              邮箱
            </template>
            12874128@qq.com
          </el-descriptions-item>
          <template slot="extra">
            <el-button type="primary" size="small" @click="handleAdd1">更改密码</el-button>
          </template>
        </el-descriptions>




        <!--修海个人信息块-->
        <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%" >
          <el-form label-width="80px" size="small">

            <el-form-item label="姓名">
              <el-input v-model="form.sname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
              <el-input v-model="form.telephoneNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="班级">
              <el-input v-model="form.telephoneNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.sno" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" >取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>
<!--        修改密码块-->
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible1" width="30%" >
          <el-form label-width="80px" size="small">

            <el-form-item label="原密码">
              <el-input v-model="form.sname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码">
              <el-input v-model="form.telephoneNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input v-model="form.sno" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" >取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>

    </el-container>
  </el-container>

</template>

<script>
import request from "@/utils/request";

export default {
  name: 'TeacherView',
  data() {
    return {
      size: '',
      circleUrl: "https://gd-hbimg.huaban.com/64550a2541d43d1db6483d5cbbe12c0f37682e6212c16-rDCxmc_fw236",
      sizeList: ["large"],
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 6,

      sname: "",
      telephoneNumber: "",
      email: "",
      picture: "",


      form: {},
      dialogFormVisible: false,
      dialogFormVisible1: false,
      multipleSelection: [],
      msg: "hello",
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      headerBg: 'headerBg'
    }
  },
  created() {
    // 请求分页查询数据
    this.load()
  },
  methods: {
    collapse() {  // 点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {  // 收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else {   // 展开
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
    load() {
      this.request.get("/pygram/teacher/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.sname,
          sno: this.sno,
        }
      }).then(res => {

        this.tableData = res.data.records

        this.total = res.data.total

      })
    },
    save() {
      request.post("/pygram/teacher", this.form).then(res => {
        if (res) {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
    },
    handleAdd1() {
      this.dialogFormVisible1 = true
      this.form = {}
    },
    handleEdit(row) {
      this.form = row
      this.dialogFormVisible = true
    },

    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    reset() {
      this.sname = ""
      this.sno=""
      this.load()
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    }
  }
}
</script>

<style>
.headerBg {
  background: #eee!important;
}
</style>




